<template>
  <div>
    <el-button type="primary" @click="initData">异步渲染数据</el-button>

    <common-echarts :option="option" ref="echarts" :width="600" :height="600"></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "@/components/echarts/echarts.vue";

export default {
  name: "LoadingEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [{ name: "所售商品", type: "pie", data: [] }];

      return {
        title: { text: "各商品销量占比", subtext: "异步加载数据", left: "center" },
        tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" },
        legend: { orient: "vertical", left: "left", data: [] }, // 商品标题的位置
        series,
      };
    },
  },
  data() {
    return {
      showRichText: true,
      echarts: null,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      var data = {
        categories: ["A商品", "B商品", "C商品", "D商品", "E商品"],
        data: [
          { value: 343, name: "A商品" },
          { value: 250, name: "B商品" },
          { value: 509, name: "C商品" },
          { value: 108, name: "D商品" },
          { value: 948, name: "E商品" },
        ],
      };

      const myChart = this.$refs.echarts.getChart();
      myChart.showLoading();

      setTimeout(() => {
        //异步加载数据
        myChart.hideLoading();
        //数据加载完成后隐藏动画
        myChart.setOption({
          legend: { data: data.categories },
          series: [
            {
              //根据名字对应到相应的系列
              name: "销量",
              data: data.data,
            },
          ],
        });
      }, 5000);
    },
  },
};
</script>
